@page "/Bar_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

@using Title = AntDesign.Charts.Title


<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <Bar Data="data1" Config="config1" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <Bar Data="data2" Config="config2" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <Bar Data="data2" Config="config3" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <Bar Config="config4" OnFirstRender="onChart4_FirstRender" />
    </TabPane>
    <TabPane Key="5" Tab="Sample 5">
        <Bar Data="data5" Config="config5" />
    </TabPane>
    <TabPane Key="6" Tab="Sample 6">
        <Bar Data="data2" Config="config6" OtherConfig="otherConfig6" />
    </TabPane>
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Bar @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }


    #region 示例1
    readonly object[] data1 =
    {
        new {year = "1951 年", value = 38},
        new {year = "1952 年", value = 52},
        new {year = "1956 年", value = 61},
        new {year = "1957 年", value = 145},
        new {year = "1958 年", value = 48}
    };

    readonly BarConfig config1 = new BarConfig
    {
        XField = "value",
        YField = "year",
        SeriesField = "year",
        Legend = new Legend
        {
            Position = "top-left"
        }
    };
    #endregion 示例1

    #region 示例2
    object[] data2 = new object[]
    {
        new
        {
            type = "家具家电",
            sales = 38,
        },
        new
        {
            type = "粮油副食",
            sales = 52,
        },
        new
        {
            type = "生鲜水果",
            sales = 61,
        },
        new
        {
            type = "美容洗护",
            sales = 145,
        },
        new
        {
            type = "母婴用品",
            sales = 48,
        },
        new
        {
            type = "进口食品",
            sales = 38,
        },
        new
        {
            type = "食品饮料",
            sales = 38,
        },
        new
        {
            type = "家庭清洁",
            sales = 38,
        },
    };

    readonly BarConfig config2 = new BarConfig
    {
        XField = "sales",
        YField = "type",
        //todo missing barWidthRatio
        Meta = new
        {
            Type = new
            {
                Alias = "类别"
            },
            Sales = new
            {
                Alia = "销售额",
            }
        }
    };
    #endregion 示例2

    #region 示例3
    readonly BarConfig config3 = new BarConfig
    {
        XField = "sales",
        YField = "type",
    //todo missing minBarWidth
    //todo missing maxBarWidth
        Meta = new
        {
            Type = new
            {
                Alias = "类别"
            },
            Sales = new
            {
                Alia = "销售额",
            }
        }
    };

    #endregion 示例3

    #region 示例4
    private async Task onChart4_FirstRender(IChartComponent chart)
    {
        var data4 = await DemoData.SalesAsync(NavigationManager, HttpClient);
        await chart.ChangeData(data4);
    }

    readonly BarConfig config4 = new BarConfig
    {
        XField = "销售额",
        YField = "城市",
        YAxis = new CatAxis
        {
            Visible = true,
            Label = new BaseAxisLabel
            {
                AutoRotate = true,
            }
        },
        Scrollbar = new Scrollbar()
        {
            Type = "vertical"
        }
    };

    #endregion 示例4

    #region 示例5
    readonly object[] data5 =
{
        new {action = "浏览网站", pv = 50000},
        new {action = "放入购物车", pv = 35000},
        new {action = "生成订单", pv = 25000},
        new {action = "支付订单", pv = 15000},
        new {action = "完成交易", pv = 8500}
    };

    readonly BarConfig config5 = new BarConfig
    {
        XField = "pv",
        YField = "action",
        ConversionTag = new ConversionTagOptions
        {
            Visible = true
        }
    };

    #endregion 示例5

    #region 示例6
    readonly BarConfig config6 = new BarConfig
    {
        XField = "sales",
        YField = "type",
        Legend = new Legend()
        {
            Position = "top-left",
        },
        Interactions = new Interaction[]
        {
            new Interaction { Type = "active-region", Enable = false }
        },
        BarSize = 15, 
        //todo missing BarBackground
    };

    object otherConfig6 = new
    {
        BarBackground = new
        {
            Style = new
            {
                Fill = "rgba(0,0,0,0.1)",
            },
        },
    };

    #endregion 示例6

}
